<template>
	<div class="View">
		<div class="title">
			<i class="iconfont"></i>
			{{ $t("message.environmentSetting.list.title_22") }}
		</div>
		<div class="tab">
			<div class="view_1">
				肉厚仕様での設定内容に沿いMATを自動計算します。対象は配管です。
			</div>
			<div class="view_3">
				<ux-grid :data="tableData" :border="false" :header-cell-style="{
					color: 'rgba(0, 0, 0, 0.85)',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: 'bold',
					padding: 0,
					height: '32px',
					background: '#F5F5F5',
				}" :cell-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '14px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" :row-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '13px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" max-height="758" ref="uxGrid" :height="tableHeight" v-loading="loading"
					element-loading-spinner="el-icon-loading" @cell-click="handClick"
					element-loading-background="#f8f8f8" @selection-change="handleSelectionChange"
					:element-loading-text="$t('message.bhView.loading')">
					<template slot="empty"> No data </template>
					<ux-table-column type="checkbox" width="50" fixed="left" align="left"> </ux-table-column>
					<ux-table-column property="pltName" title="装置名称" align="left">
						<template slot-scope="scope">
							<div> {{ scope.row.pltName }} </div>
						</template>
					</ux-table-column>
				</ux-grid>
			</div>

		</div>

		<div class="footer">
			<el-button @click="initFn">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>
			<el-button type="primary" class="okBTn" @click="CalcMatFn">
				OK
			</el-button>
		</div>
	</div>
</template>

<script>
import {
	getMatPlant, GetCalcMatTipsMsg, CalcMat
} from "@/api/api";
import $ from "jquery";
import timeFormat from "@/utils/timeFormat";
import { showLoading, hideLoading } from "@/utils/loading";
export default {
	name: "CalcIndex",
	data() {
		return {
			tableHeight: 730,
			radio: 1,
			format: timeFormat(),
			loading: false,
			tableData: [{
				test1: 'サンブル装置',
				test2: '公称値',
				test3: '全経歴',
				test4: '近似直線',
			}, {
				test1: 'サンブル装置',
				test2: '公称値',
				test3: '全経歴',
				test4: '近似直線',
			}, {
				test1: 'サンブル装置',
				test2: '公称値',
				test3: '全経歴',
				test4: '近似直線',
			}],
			selectList: []
		};
	},
	components: {},
	watch: {},
	methods: {
		selectable(row, index) {
			if (index === 1) {
				return false
			} else {
				return true
			}
		},
		handleSelectionChange(e) {
			console.log(e);
			this.selectList = e;
		},
		handClick(e) {
			console.log(e);
		},
		async CalcMatFn() {
			let D = {};
			let R = await GetCalcMatTipsMsg(D);
			if (R.data.code == 451) {
				this.$confirm(R.data.msg, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				}).then(async () => {
					showLoading();
					let D1 = [];
					this.selectList.forEach(item => {
						D1.push(item.pltCode)
					});
					let R1 = await CalcMat({ PltCode: D1 });
					hideLoading();
					if (R1.data.code != 0) {
						this.$alert(R1.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});

						return
					}
					this.$message.success(R1.data.msg);
					if (typeof (R1.data.data) == 'string') {
						window.open(R1.data.data)
					}
				}).catch(() => {
				});
			}
		},
		async getDataFn() {
			let D = {};
			let R = await getMatPlant(D);
			this.tableData = R.data.data;
			console.log(this.M);
		},
		async initFn() {
			await this.getDataFn();
		}
	},
	created() { },
	mounted() {
		this.initFn();
		this.tableHeight = $(".View").height() - 154;
		this.$nextTick(function () {
			window.addEventListener(
				"resize",
				() => {
					return (() => {
						this.tableHeight = $(".View").height() - 154;
					})();
				},
				false
			);
		});
	},
	updated() {
		// 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
		var elements = document.querySelectorAll('.elx-cell--checkbox');

		// 遍历这些元素  
		elements.forEach(function (element) {
			// 修改每个元素的title属性  
			element.setAttribute('title', '');
		})
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
	height: 100%;
	padding-left: 32px;
	position: relative;
	width: 1231px;
	max-width: 1231px;

	.title {
		width: 100%;
		height: 32px;
		border-bottom: 1px solid #d8d8d8;
		display: flex;
		align-items: center;

		.iconfont {
			margin-right: 10px;
		}
	}

	.view_1 {
		padding: 4px 10px;
		background-color: #8e8e8e18;
	}

	.view_2 {
		padding: 10px 0;
		display: flex;

		span {
			font-weight: 600;
		}

		.single {
			// width: 300px;
			margin-right: 60px;

			.radi {
				padding: 5px 10px;
				border: 1px solid #d8d8d8;
				background-color: #fff;
				margin-top: 8px;

			}
		}

		.single1 {
			// width: 300px;
			margin-right: 60px;

			.radi {
				margin-top: 9px;
			}

			::v-deep .el-input {
				width: 100px;
				height: 32px;
				margin: 0px 10px 0 0;
			}

			::v-deep .el-input__inner {
				width: 100px;
				height: 32px;
			}

			.picker {
				width: 100px;
				margin: 0px 10px 0 0;

				::v-deep .el-input__icon {
					line-height: 32px;
					color: #909399;
				}
			}

			.orange {
				::v-deep .el-input__inner {
					background-color: #FFDEACFF;
				}
			}
		}


	}

	.view_3 {
		height: 80%;
		background-color: green;
	}
}

.footer {
	position: absolute;
	left: 32px;
	bottom: 50px;
	height: 32px;
	display: flex;

	button {
		width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
	}

	.okBTn {
		width: 86px !important;
		// background: #106ebe;
		// color: #fff;
	}
}
</style>
